<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/代办标签.css">
</head>
<body>
    <div class="box">
        <h2>代办事项便签</h2>
        <button class="add">增加</button>
        <button class="remove">删除</button>
        <div class="content"></div>
    </div>
    <script>
        var data=`习近平在信中指出中国红十字会是党和政府在人道领域联系群众的桥梁和
                 纽带新时代新征程中国红十字会要坚持党的全面领导聚焦高质量发展进一
                 步深化改革创新增强政治性先进性群众性加强公信力建设提高人道服务能力
                 积极参与和支持国际人道主义事业，为以中国式现代化全面推进强国建设民
                 族复兴伟业和促进人类和平与进步事业作出新的更大贡献`
        $('.add').onclick=function(){
            // 1 创建div元素 且class为tag
            var tag = document.createElement("div");
            // 2 给tag设置class属性 确保样式
            tag.setAttribute("class" , "tag")
            // 3 给tag设置内容 内容是随机的
            tag.innerHTML = data.substr( randomNum(0 , 199) , randomNum(20 , 27) ) + "<span>&times;</span>"
            // console.log(tag)
            $('.content').appendChild(tag)
                // 5 直接获取当前 创建的tag下的span 直接绑定事件
                var del = tag.lastElementChild;
                del.onclick = function(){
                // el.remove() 删除当前元素  jquery的方法
                del.parentNode.remove()
            }
        }
        $('.remove').onclick=function(){
            $('.content').innerHTML=''
        }



        // 封装获取随机数函数
        function randomNum(min,max){
            return Math.floor(Math.random()*(max-min+1)+min)
        }
        // 封装获取元素函数
        function $(el){
            return document.querySelector(el)
        }
    </script>
</body>
</html>